<template>
	<div class="manage">
		<div class="body">
			<div class="page"><!--首页模块展示-->
				<div class="title">首页模块展示</div>
					<div class="cont">
						<!--没有内容时-->
						<div class="cont-dotted" v-if="arrAll.every(d=>parseInt(d.home)!==1)">
								<span>暂无内容</span>
						</div>
						<!--有内容-->
						<div v-else class="list main"  v-for="(list,i) in arrAll" :key="i" 
						:class="{active:list.checked}" @click="checkItem(list)" v-show="list.home==1">
							{{list.moduleName}}
							<div class="edit" @click.stop="build(list)"></div>
						</div>
					</div>
			</div>
			<div class="operation">
				<div>
					<el-button @click="toRight()">从首页移除
						<i class="fa fa-angle-double-right"></i>
					</el-button>
				</div>
				<div>
					<el-button @click="toLeft()">添加到首页
						<i class="fa fa-angle-double-left"></i>
					</el-button>
				</div>
				<div>
					<el-button @click="deleteModule()">删除</el-button>
				</div>
			</div>
			<div class="page"><!--首页模块示意图-->
				<div class="title">首页模块示意图</div>
					<div class="cont">
						<div > 
								<div class="list add" @click="addmodule()"><b>+</b> 创建模块</div>
								<div  class="list sub" v-for="(list,i) in arrAll" :key="i"
									:class="{active:list.checked}" @click="checkItem(list)" v-show="list.home==0">
									{{list.moduleName}}
									<div class="edit" @click.stop="build(list)"></div>
								</div>
						</div>
					</div>
			</div>
		</div>
		<build v-on:increment="getQueryByOrgCodeHome()" v-if="full==true" 
		:data="update" :label="name" :exit="()=>full=false"></build>
	</div>
</template>
<script>
	let num
	let arrhide = []
	let arrshow = []
	import build from './build'
	export default{
		name:"manage",
		components:{build},
		data() {
			return{
				full:false,
				name:'',
				arrshow:[],
				arrhide:[],
				update:[]
			}
		},
		mounted(){
			this.getQueryByOrgCodeHome()
		},
		computed:{
			arrAll(){
				if(this.arrshow.length==0){
					return this.arrhide
				}else if(this.arrhide.length==0){
					return this.arrshow
				}else{
					return this.arrshow.concat(this.arrhide)
				}
			},
			flag(){
				return this.$store.state.Set.flag
			},
			moduleId(){
				return this.$store.state.Set.moduleId
			}
		},
		methods:{
			getQueryByOrgCodeHome(){
				let arr = [0,1]
				let reqs = arr.map(d=>{
					return this.$http.post('vrv-monitor-platform-web/module/queryByOrgCodeHome',{home:d})
				})
				Promise.all(reqs).then(r=>{
					this.arrhide = r[0].body.data
					this.arrhide.map(d=>{
					this.$set(d,"checked",false)
					})
					this.arrshow = r[1].body.data
					this.arrshow.map(d=>{
						this.$set(d,"checked",false)
					})
					this.openModule()
				})
			},
			checkItem(item){
				item.checked = !item.checked
			},
			openModule(){
				if (this.flag) {
					let arr = this.arrAll.filter(d => d.id==this.moduleId)
					this.buildother(arr[0])
				}
			},
			toRight(){
				this.arrAll.forEach((value,index)=>{
					if (value.checked==true) {
						value.home=0
						value.checked = false
						this.$http.post('vrv-monitor-platform-web/module/changeShow',{
							id:value.id,
							home:0
						}).then(res=>{
							let info=res.body.message
							if(res.body.success==true){
									this.$message({
										type: 'success',
										message: '删除成功!'
									});		
							}else if(res.body.success==false){
									this.$message({
										type: 'error',
										message: info
									});
									this.getQueryByOrgCodeHome()	
							}
						})
					};
				})
			},
			toLeft(){
				this.arrAll.forEach((value,index)=>{
					if (value.checked==true) {
						value.home=1
						value.checked = false
						this.$http.post('vrv-monitor-platform-web/module/changeShow',{
							id:value.id,
							home:1
						}).then(res=>{
							let info=res.body.message
							if(res.body.success==true){
									this.$message({
										type: 'success',
										message: '添加成功!'
									});		
							}else if(res.body.success==false){
									this.$message({
										type: 'error',
										message: info
									});
									this.getQueryByOrgCodeHome()	
							}							
						})
					};
				})
			},
			build(list){
					this.name = '修改模块'
					this.full=true
					this.update = list
			},
			buildother(item){
				this.full=true
				this.update = item
				this.name = '修改模块'
				this.$store.commit('updateFlag',{
			        flag:false
				});
			},
			addmodule(){
				this.full = true
				this.update = ''
				this.name = '添加模块'
			},
			deleteModule(){
				this.$confirm('此操作将删除该模块, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
							let arr = this.arrAll.filter(d=>d.checked)
							let p = arr.map(d =>
								this.$http.post('vrv-monitor-platform-web/module/delete',{
									id:d.id,
									categoryId:d.categoryId,
									topicId:d.topicId
								})
							)

							Promise.all(p).then((res)=>{
									if(res[0].body.statusCode=='403'){
									let inmsg=res[0].body.message
									this.$message({
										type: 'error',
										message: inmsg+'!'
									});
										return 
									}
									this.getQueryByOrgCodeHome()
									this.$message({
										type: 'success',
										message: '删除成功!'
									});
								})
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
			}
		}
	}
</script>
<style  lang="stylus" scoped>
::-webkit-scrollbar
	width 4px
::-webkit-scrollbar-track
	background #e7e7e7
::-webkit-scrollbar-thumb
	height 3.7rem
	background #c2c7cc
.manage
	min-height 100%
	.body
		width 820px
		margin 0 auto
		font-size 0
		.page
			display inline-block
			vertical-align top
			width 300px
			.title
				margin-top 60px
				font-size 18px
				color #000
				text-align center
			.cont
				margin-top 30px
				border 1px solid #dcdcdc
				height 580px
				padding 20px
				overflow-y auto
				.cont-dotted
					border 1px dotted #dcdcdc
					height 100%
					>span
						display block
						height 100%
						line-height 580px
						text-align center
						font-size 16px
						color #a1a2ab
					.prompt
						margin-top 180px
						.img
							width 72px
							height 72px
							margin 0 auto
							background url('./img/add.png')
						.text
							margin-top 60px
							font-size 16px
							color #a1a2ab
							text-align center
				.list
					position relative
					height 50px
					margin-bottom 20px
					font-size 16px
					color #a1a2ab
					text-align center
					line-height 50px
					border 1px solid #dcdcdc
					cursor pointer
					&.sub
						border 1px dashed #dcdcdc
					&.add
						background #0267cf
						color #fff
					&:hover
						>.edit
							display block
					.edit
						position absolute
						display none
						right 15px
						top 15px
						width 20px
						height 20px
						background url(./img/edit.png) no-repeat

	.main
		&.active
			border-color #0267cf !important
			color #0267cf !important
	.sub
		&.active
			border-color #0267cf !important
	.operation
		display inline-block
		vertical-align top
		width 220px
		div
			text-align center
			margin-top 20px
			&:first-child
				margin-top 260px
			.el-button
				width 120px
		
					
				

	
</style>